<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
import { useJokerStore } from '@/stores/joker';

const store = useCounterStore()
const joke = useJokerStore()
// const res= axios.get('https://hmajax.itheima.net/api/news')
// console.log(res.data);


</script>

<template>
  <div>
    <h1>我的页面</h1>
    <h2>{{ store.count }}</h2>
    <h2>{{ store.doubleCount }}</h2>
    <button @click="store.increment">增加++</button>
    <p @click="joke.refreshJoke">{{ joke.joke }}</p>
    <img src="../img/126310450_p8_master1200.jpg" alt="">
  </div>

</template>

<style scoped>
h1 {
  width: 60%;
  color: #ad2a26;
  text-align: center;
}

button {
  width: 20%;
}

h2 {
  width: 60%;
  color: #ad2a26;
  text-align: center;
}

img {
  width: 50%;
  object-fit: cover;
}

div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 10px;
}
</style>
